<script setup lang="ts">
import { getOnePoet, getPinyinList, getPinyinHtml } from "@/apis";
import { reactive, onMounted, ref, Ref } from "vue";
import type { Poet } from "@/types";
import { BaiduHandler } from "@/apis";
import { VideoPlay, ChatDotRound, Document } from "@element-plus/icons-vue";

const mainPoetData = reactive<Poet>({
  title: "",
  author: "杨万里",
  poetMessage: "",
});
const myBaiduHandler = new BaiduHandler();

const htmlString = ref("");

const translatedString = ref("");

onMounted(async () => {
  mainPoetData.poetMessage = await getOnePoet();
  mainPoetData.title = "《昭君怨·咏荷上雨》";
  htmlString.value = getPinyinHtml(mainPoetData.poetMessage);
  translatedString.value =
    "翻译：" + (await myBaiduHandler.translate(mainPoetData.poetMessage));
});

const readAudioHandler = () => {
  myBaiduHandler.fetchAndPlayAudio(mainPoetData.poetMessage);
};

const isCheckedPinyin = ref<boolean>(true);
const isCheckedTranslate = ref<boolean>(false);

const toggleCheckboxPinyin = () => {
  isCheckedPinyin.value = !isCheckedPinyin.value;
};

const toggleCheckboxTranslate = () => {
  isCheckedTranslate.value = !isCheckedTranslate.value;
};
</script>

<template>
  <div>
    <el-icon
      :class="{
        'dark-color': isCheckedPinyin,
        'light-color': !isCheckedPinyin,
      }"
      @click="toggleCheckboxPinyin"
    >
      <ChatDotRound />
    </el-icon>

    <el-icon
      :class="{
        'dark-color': isCheckedTranslate,
        'light-color': !isCheckedTranslate,
      }"
      @click="toggleCheckboxTranslate"
    >
      <Document />
    </el-icon>
    <h1>{{ mainPoetData.title }}</h1>
    <h5>{{ mainPoetData.author }}</h5>
    <h3 v-if="!isCheckedPinyin">{{ mainPoetData.poetMessage }}</h3>
    <div v-html="htmlString" v-if="isCheckedPinyin"></div>
    <div v-if="isCheckedTranslate">{{ translatedString }}</div>
    <el-button @click="readAudioHandler">
      <el-icon>
        <VideoPlay />
      </el-icon>
      播放音频
    </el-button>

    <el-tabs type="border-card">
      <el-tab-pane label="原文与溯源">
        <div>
          <h1>{{ mainPoetData.title }}</h1>
          <h5>{{ mainPoetData.author }}</h5>
          <h3 v-if="!isCheckedPinyin">{{ mainPoetData.poetMessage }}</h3>
        </div>
      </el-tab-pane>
      <el-tab-pane label="古文今译">Config</el-tab-pane>
      <el-tab-pane label="汉语拼音">
        <div>
          <h1>{{ mainPoetData.title }}</h1>
          <h5>{{ mainPoetData.author }}</h5>
          <h3 v-if="!isCheckedPinyin">{{ mainPoetData.poetMessage }}</h3>
        </div>
      </el-tab-pane>
      <el-tab-pane label="诗词诵读">Task</el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.dark-color {
  color: #000000;
}

.light-color {
  color: red;
}
</style>
